<template>
	<u-popup
		mode="center"
		bgColor="transparent"
		:show="showGoods"
		@open="openGoods"
		@close="closeGoods">
		<view class="goods-popup">
			<view class="goods-popup-info main-flex">
				<view class="goods-popup-img">
					<image class="goods-popup-img-url" mode="aspectFill" :src="imgUrl(goods.image)"></image>
				</view>
				<view class="goods-popup-info-r main-flex-item">
					<view class="goods-popup-name">{{goods.name}}</view>
					<view class="goods-popup-market" v-if="goods?.marketTitle">{{goods.marketTitle}}</view>
					
					<!-- <view class="goods-popup-sales">销量：{{goods.salesNumber}}</view> -->
				</view>
			</view>
			<view class="goods-popup-unit main-flex" v-if="goods?.unit">
				单位：
				<text class="goods-popup-unit-text">{{goods.unit}}</text>
			</view>
			<view class="goods-popup-price main-flex">
				售价：
				<view class="goods-popup-price-num">￥{{moneyStr(goods.sellPrice)}}</view>
			</view>
			<view class="goods-popup-count main-flex">
				<view class="goods-popup-count-title">购买数量</view>
				<view class="goods-popup-count-box">
					<u-number-box
						bgColor="#e3230e"
						integer
						v-model="count"
						@change="changeCount">
						<template v-slot:minus>
							<view class="minus">
								<uni-icons type="minus-filled" size="28" color="#cccccc"></uni-icons>
							</view>
						</template>
						<template v-slot:plus>
							<view class="plus">
								<uni-icons type="plus-filled" size="28" color="#e3230e"></uni-icons>
							</view>
						</template>
					</u-number-box>
				</view>
			</view>
			<view class="goods-popup-other main-flex">
				<view class="goods-popup-total main-flex">
					合计:
					<text class="price">￥{{moneyStr(total)}}</text>
				</view>
				<button
					class="ty-button ty-button-confirm goods-popup-btn"
					@click="addCar"
					size="mini">加入购物车</button>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
  /**
   * GoodsPopup 商品弹窗
   * @description 商品弹窗
   * @property {Object} goods 商品信息
   * @event {Function} chooseGoods 点击+
   */
	import { computed, onMounted, ref, watch } from "vue"
	import { Decimal } from 'decimal.js'
	import { customerCarAdd } from "@/api/app_api/car"
	import useUserStore from "@/store/modules/user"
	import modal from '@/plugins/modal'
	import { getMpLogin } from '@/utils/login.js'
	
	const userStore = useUserStore()
	const props = defineProps({
		showGoods: {
			type: Boolean,
			default: false 
		},
		goods: {
			type: Object,
			default: {}
		}
	})
	
	const emits = defineEmits(['close', 'add'])
	const openGoods = () => {
		
	}
	const closeGoods = () => {
		count.value = 1
		emits('close')
	}
	
	// 商品数量
	const count = ref(1)
	const changeCount = (id) => {
		
	}
	
	// 价格计算
	const total = computed(() => {
		return props?.goods?.sellPrice ? Decimal(props.goods.sellPrice).mul(Decimal(count.value)) : '0.00'
	})
	
	const isAddCar = ref(false)
	const addCar = () => {
		if (!getMpLogin()) {
			return false
		}
		if (isAddCar.value) return false
		isAddCar.value = true
		const params = {
			moreSpec: props.goods.moreSpec,
			productId: props.goods.id,
			productImg: props.goods.image,
			productName: props.goods.name,
			productNumber: count.value,
			productPrice: props.goods.sellPrice,
			regionCode: props.goods.regionCode,
			sellChannel: userStore.sellChannel
		}
		customerCarAdd(params).then(res => {
			uni.$u.toast('已加入购物车')
			isAddCar.value = false
			emits('add', params)
			uni.$emit('addCar')
			closeGoods()
		}).catch(err => {
			isAddCar.value = false
		})
	}
	
</script>

<style lang="scss" scoped>
  .goods-popup {
		width: 600rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		&-info {
			align-items: flex-start;
			&-r {
				padding-left: 20rpx;
			}
		}
		&-img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			overflow: hidden;
			&-url {
				width: 160rpx;
				height: 160rpx;
			}
		}
		&-name {
			font-size: 28rpx;
			font-weight: 600;
		}
		&-market {
			font-size: 24rpx;
			margin-top: 20rpx;
		}
		&-unit {
			font-size: 28rpx;
			margin-top: 20rpx;
			&-text {
				margin-left: auto;
			}
		}
		&-price {
			font-size: 28rpx;
			margin-top: 10rpx;
			&-num {
				font-weight: 600;
				color: $price-color;
				margin-left: auto;
			}
		}
		&-count {
			margin-top: 20rpx;
			&-title {
				font-size: 28rpx;
			}
			&-box {
				margin-left: auto;
			}
		}
		&-other {
			margin-top: 40rpx;
		}
		&-total {
			font-size: 32rpx;
			.price {
				color: $price-color;
				font-weight: 600;
			}
		}
		&-btn[size='mini'] {
			margin: 0;
			margin-left: auto;
			border: none;
			line-height: 54rpx;
			padding: 0 20rpx;
			border-radius: 26rpx;
		}
	}
	.minus {
		margin-right: 10rpx;
	}
	.plus {
		margin-left: 10rpx;
	}
</style>
